<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开启头部工具栏 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">批次列表</div>
                <div class="layui-card-body">
                    <!--这是搜索-->
                    <div class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-from-ll"></label>
                                <div class="layui-input-inline">
                                    <input type="text" id="queryId" placeholder="请输入序号" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-from-ll"></label>
                                <div class="layui-input-inline">
                                    <input type="text" id="queryName" placeholder="请输入批次名称" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-from-ll"></label>
                                <div class="layui-input-inline" >
                                    <select name="interest"  id="queryLevel" lay-filter="aihao">
                                        <option value="" disabled selected hidden>选择困难等级</option>
                                        <option value="1">一般困难</option>
                                        <option value="2">特殊困难</option>
                                        <option value="2">不困难</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-from-ll"></label>
                                <div class="layui-input-inline" >
                                    <select name="interest"  id="queryActive" lay-filter="aihao">
                                        <option value="" disabled selected hidden>选择状态</option>
                                        <option value="1">已激活</option>
                                        <option value="2">未激活</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" id="queryBtn">查询</button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" id="reset">重置</button>
                            </div>
                        </div>
                    </div>
                    <!--这就是表格-->
                    <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
                    <script type="text/html" id="test-table-toolbar-toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="batch">新建批次</button>
                            <button class="layui-btn layui-btn-sm" lay-event="deletePatch">删除选中</button>
                        </div>
                    </script>
                    <!--操作按钮模板-->
                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!--编辑弹框-->
<div class="layui-form" id="newBatch" style="display: none;padding: 20px;">
    <input type="hidden" id="batchId">
    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
            <input type="text" id="id" readonly autocomplete="off" placeholder="序号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">批次名称</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <label class="layui-form-label">申请时间</label>
        <div class="layui-input-block">
        <input type="text" lay-verify="title" class="layui-input" id="ApplicationTime" placeholder="至">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">困难等级</label>
        <div class="layui-input-block">
            <select name="interest" id="DifficultyLevel" lay-filter="aihao">
                <option value="一般困难">一般困难</option>

                <option value="特殊困难">特殊困难</option>
                <option value="不困难">不困难</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <label class="layui-form-label">选衣时间</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="title" class="layui-input" id="SelectionTime" placeholder="至">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="interest" id="active" lay-filter="aihao">
                <option value="1">已激活</option>
                <option value="0">未激活</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            <button type="button" class="layui-btn" lay-submit="" id="subBtn" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</div>

<div class="layui-form" id="newPitch" style="display: none;padding: 20px;">
    <input type="hidden" id="newId">
    <div class="layui-form-item">
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
            <input type="text" id="xId"  autocomplete="off" placeholder="序号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">批次名称</label>
        <div class="layui-input-block">
            <input type="text" id="xname" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <label class="layui-form-label">申请时间</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="title" class="layui-input" id="xApplicationTime" placeholder="至">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">困难等级</label>
        <div class="layui-input-block">
            <select name="interest" id="xDifficultyLevel" lay-filter="aihao">
                <option value="一般困难">一般困难</option>

                <option value="特殊困难">特殊困难</option>
                <option value="不困难">不困难</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <label class="layui-form-label">选衣时间</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="title" class="layui-input" id="xSelectionTime" placeholder="至">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="interest" id="xactive" lay-filter="aihao">
                <option value="1">已激活</option>
                <option value="0">未激活</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-primary" id="xcancelBtn">取消</button>
            <button type="button" class="layui-btn" lay-submit="" id="xsubBtn" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</div>


<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form','laydate'], function() {
        var admin = layui.admin,
            $ = layui.$,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;

        table.render({
            elem: '#test-table-toolbar'
            , url: '/batchSetting/list',
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            },
            request: {
                pageName: 'pageNo' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , toolbar: '#test-table-toolbar-toolbarDemo'
            , title: '用户数据表'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: '序号'}
                    , {field: 'name', title: '批次名称'}
                    , {field: 'applicationStartDate', title: '申请开始时间'}
                    , {field: 'applicationEndDate', title: '申请截至时间'}
                    , {field: 'registerStartDate', title: '选衣开始时间'}
                    , {field: 'registerEndDate', title: '选衣截至时间'}
                    , {field: 'difficultyLevel', title: '困难等级'}
                    , {field: 'active', title: '状态'}
                    , {fixed: 'right', title: '操作', toolbar: '#test-table-toolbar-barDemo', width: 150}
                ]
            ]
            , page: true
        });

        laydate.render({
            elem: '#SelectionTime',
            range: '至'
        });
        laydate.render({
            elem: '#xSelectionTime',
            range: '至'
        });
        //日期
        laydate.render({
            elem: '#ApplicationTime',
            range: '至'
        });
        laydate.render({
            elem: '#xApplicationTime',
            range: '至'
        });

        // 查询
        $("#queryBtn").click(function () {
            table.reload('test-table-toolbar', {
                url: '/batchSetting/list'
                , where: {
                    id: $("#queryId").val(),
                    name: $("#queryName").val(),
                    difficultyLevel: $("#queryLevel").val(),
                    active: $("#queryActive").val()
                } //设定异步数据接口的额外参数
            });

        })

        //重置
        $("#reset").click(function () {
            $("#queryId").val("")
            $("#queryName").val("")
            $("#queryLevel").val("")
            $("#queryActive").val("")
            form.render()
        })
        //头工具栏事件
        table.on('toolbar(test-table-toolbar)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'batch':
                    batchEvent();
                    break;

            }
            ;
        });


//监听行工具事件
        table.on('tool(test-table-toolbar)', function (obj) {
            var data = obj.data;// 点的按钮对应的行的数据
            var event = obj.event;// 触发的哪个按钮
            switch (event) {
                case 'edit':
                    // 做编辑的事
                    editEvent(data);
                    break;
                case "del":
                    // 删除的事
                    deleteEvent(data)
                    break;
            }
        });

        // 点击删除
        function deleteEvent(data) {
            layer.confirm('确认删除选中数据吗?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: 'get',
                    url: '/whitelistSetting/removeById?id=' + data.id,
                    success: function (res) {
                        if (res.data == true) {
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 重新刷新表格
                                table.reload('test-table-toolbar', {
                                    url: '/whitelistSetting/list'
                                    , where: {} //设定异步数据接口的额外参数
                                });
                            });
                        }
                    }
                })
            }, function () {

            });
        }

        function batchEvent() {
            $("#editId").val("")
            $("#editSn").val("")
            $("#editPwd").val("")
            $("#editName").val("")
            $("#editRoleId").val("")
            $("#editEnabled").val("")
            form.render('select');
            layer.open({
                type: 1,
                area: '500px',
                title: '新建批次',
                content: $("#newPitch")
            })
        }

        // 点击编辑
        function editEvent(data) {
            // 给弹框内容赋值
            $("#batchId").val(data.id)
            $("#name").val(data.name)
            $("#ApplicationTime").val(data.applicationStartDate)
            $("#editName").val(data.name)
            $("#editRoleId").val(data.roleId)
            $("#editEnabled").val(data.enabled)
            form.render('select');
            // 打开弹框
            layer.open({
                type: 1,
                area: '500px',
                title: '编辑用户',
                content: $("#newBatch")
            })
        }


        // 点击提交
        $('#subBtn').click(function () {
                    $.ajax({
                        type: 'post',
                        url: '/whitelistSetting/update',
                        data: {
                            id: $("#editId").val(),
                            sn: $("#editSn").val(),
                            password: $("#editPwd").val(),
                            name: $("#editName").val(),
                            roleId: $("#editRoleId").val(),
                            enabled: $("#editEnabled").val()
                        },
                        success: function (res) {
                            if (res.data == true) {
                                layer.msg('编辑成功', {
                                    icon: 1,
                                    time: 1500
                                }, function () {
                                    // 重新刷新表格
                                    table.reload('test-table-toolbar', {
                                        url: '/whitelistSetting/list'
                                        , where: {} //设定异步数据接口的额外参数
                                    });
                                    // 关闭弹框
                                    layer.closeAll()
                                });
                            }
                        }
                    })
                });

                // 点击取消
                $("#cancelBtn").click(function () {
                    layer.closeAll()
                });



        $('#xsubBtn').click(function () {
              var time = $("#xApplicationTime").val().split(' 至 ')
              var time2 = $("#xSelectionTime").val().split(' 至 ')
            // console.log(time[1])
            // console.log(time2[1])

            // console.log(time)
            $.ajax({
                type: 'post',
                url: '/batchSetting/batch/insert',
                data: {
                    id: $("#xId").val(),
                    name: $("#xname").val(),
                    applicationStartDate : time[0],
                    applicationEndDate   : time[1],
                    difficultyLevel :$("#xDifficultyLevel").val(),
                    registerStartDate : time2[0],
                    registerEndDate   : time2[1],
                    active :$("#xactive").val()
                },
                success: function (res) {
                    if (res.data == true) {
                        layer.msg('新增成功', {
                            icon: 1,
                            time: 1500
                        }, function () {
                            // 重新刷新表格
                            table.reload('test-table-toolbar', {
                                url: '/whitelistSetting/list'
                                , where: {} //设定异步数据接口的额外参数
                            });
                            // 关闭弹框
                            layer.closeAll()
                        });
                    }
                }
            })
        });
        // 点击取消
        $("#xcancelBtn").click(function () {
            layer.closeAll()
        });
    });
</script>
</body>
</html>